<template>
	<!-- 数据加载的时候需要先行判断是否拿到数据 v-if 
	页面比较综合，需要配合多个样式 不是但一样式
	-->
	<view v-if="data" style="display: flex;">
		<scroll-view
			scroll-y
			style="width: 30%;"
			:style="{ height: windowHeight + 'px' }"
		>
			<!-- :class="{样式类: true/false}"  true生效 false无效 -->
			<view
				class="menu-cell"
				:class="{ cur: current == index }"
				v-for="(item, index) in data.hero"
				:key="index"
				@click="doCheck(index)"
				hover-class="active"
				hover-stay-time="200"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<!-- 右侧内容 -->
		<scroll-view 
		scroll-y="true" 
		style="width: 70%;" 
		:style="{ height: windowHeight + 'px'}" 
		v-if="deta && showRight">
			<view class="area-right">
				<view style="display: flex;">
					<image
						:src="heroIcon"
						mode=""
						style="width: 180rpx; height: 180rpx;"
					></image>
				
					<view style="margin-left: 15rpx;">
						<view style="font-size: 1.2em; font-weight: bold;">
							{{ heroInfo.title }}
						</view>
						<view>昵称: {{ heroInfo.name }}</view>
						<view>金币: {{ heroInfo.goldPrice }}</view>
						<view>点券: {{ heroInfo.couponPrice }}</view>
					</view>
				</view>
				<uni-card title="背景故事" isFull>
					<view style="font-size: 0.8em">{{ heroInfo.shortBio }}</view>
				</uni-card>
				
				<uni-collapse>
					<uni-collapse-item title="使用建议">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in heroInfo.allytips"
								:key="index"
								:title="item"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				
					<uni-collapse-item title="对战技巧">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in heroInfo.enemytips"
								:key="index"
								:title="item"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				
					<uni-collapse-item title="技能说明">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in spells"
								:key="index"
								:title="item.name"
								:thumb="item.abilityIconPath"
								thumbSize="lg"
								:note="item.description"
								direction="column"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
					
					<uni-collapse-item title="皮肤">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in skins"
								:key="index"
								direction="column"
								:note="item.description"
								:title="item.name"
								:thumb="item.iconImg"
								thumbSize="lg"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deta:null,
				current:0,
				data:null,
				showRight:true,
			}
		},
		mounted() {
			this.getData();
			
		},
		methods: {
			
			getDetails(heroId){
				const url=`https://game.gtimg.cn/images/lol/act/img/js/hero/${heroId}.js`;
				
				uni.request({
					url,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res)
						this.deta=res.data
						console.log(this.deta)
						//刷新右侧  先false 然后true
						this.showRight = false;
						this.$nextTick(()=>{
							this.showRight = true;
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			doCheck(index) {
				this.current = index;
				// 拿到英雄id
				const hid = this.data.hero[index].heroId;
				this.getDetails(hid);
			},
			getData(){
				
				const url='https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js' ;
				
				
				uni.request({
					url,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res);
						this.data=res.data
						// 在拿到左边数据后，要先加载左边第一个英雄的详情，要不然空子不好看
						const hid = this.data.hero[0].heroId;
						// 先拿到第一个英雄id  然后触发加载
						this.getDetails(hid);
						
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			},
			doCheckMenu(index){
				this.current = index;
				
			},
		},
		computed:{
				windowHeight() {
					return uni.getSystemInfoSync().windowHeight;
				},
				skins() {
					return this.data.skins;
				},
				spells() {
					return this.data.spells;
				},
				heroInfo() {
					return this.deta.hero;
				},
				heroIcon() {
					return `https://game.gtimg.cn/images/lol/act/img/champion/${
						this.heroInfo.alias
					}.png`;
				}
		
		}
	}
</script>

<style lang="scss">
	.area-right {
		background-color: #eee;
		padding: 10rpx;
	}
.menu-cell {
	padding: 25rpx;
	background-color: #eee;
	border-bottom: 1px solid gray;
	text-align: center;

	// 高亮样式  &代表所在的选择器 。menu-cell 。cur
	&.cur {
		background-color: orange;
	}
}
</style>
